<template><!-- 居家检测 /编辑居家检测-->
    <div class="quan">
     <div class="ju">
        <span>居家检测/编辑居家检测</span>
     </div>
     <div class="content">
        <div class="zhong" :key="contnei.name">
            <div class="nei">
                <span class="hong">*</span><span>姓名:</span>
            </div>
            <input type="text" v-model="contnei.name"><br>
            <div class="nei">
                <span class="hong">*</span><span>性别:</span>
            </div>
            <div class="mb-2 flex items-center text-sm">
                <el-radio-group v-model="contnei.sex " class="ml-4" >
                <el-radio label="男" size="large">男</el-radio>
                <el-radio label="女" size="large">女</el-radio>
                </el-radio-group>
            </div><br>
            <div class="nei">
                <span class="hong">*</span><span>身份证号:</span>
            </div>
            <input type="text" v-model="contnei.idCard"><br>
            <div class="nei">
                <span class="hong">*</span><span>联系方式:</span>
            </div>
            <input type="text" v-model="contnei.phoneNum"><br>
            <div class="nei">
                <span class="hong">*</span><span>籍贯省份:</span>
            </div>
            <input type="text" v-model="contnei.nativeAddress"><br>
            <div class="nei">
                <span class="hong">*</span><span>籍贯地址:</span>
            </div>
            <input type="text" v-model="contnei.nowAddress"><br>
            <div class="nei">
                <span class="hong">*</span><span>现居住地:</span>
            </div>
            <input type="text" v-model="contnei.residenceAddress"><br>
            <div class="nei">
                <span class="hong">*</span><span>详细地址:</span>
            </div>
            <input type="text" v-model="contnei.address"><br>
            <div class="nei">
                <span class="hong">*</span><span>监测开始时间:</span>
            </div>
            <input type="text" v-model="contnei.startDate"><br>
            <div class="nei">
                <span class="hong">*</span><span>监测解除日期:</span>
            </div>
            <input type="text" v-model="contnei.removeDate"><br>
            <div class="n
            hei">
                <span>*</span><span>备注:</span>
            </div>
            <textarea >无</textarea>
            <div class="img">
            <img src="@/assets/chen/xie.svg" alt="">
            <span class="jian">监测中</span>
            </div>
            <div class="wei">
                <router-link to="/cha"><el-button >取消</el-button></router-link>
                <el-button type="primary" @click="xiu">修改</el-button>
        </div>
        </div>
     </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onBeforeMount } from 'vue'
import {useRoute} from 'vue-router'
import axios from '@/views/chen/http'
export default defineComponent({
    name:"bianju",
    setup(){
        const route=useRoute()
        const jie=route.query.id //接收跳转参数
        // console.log(jie);
        console.log();
        
        let contnei1:any=reactive({
            contnei:[{
                lai:'手动登记',//来源：
            name:"张三",//姓名
            gender:"女",//性别
            shen:"2930511229321",//身份证号
            phone:"13022568213",//联系方式
            ji:"四川省 成都市 龙泉驿区",//籍贯省份
            guan:"龙泉大道888号",//籍贯地址
            ju:"四川省 成都市 龙泉驿区",//现居住地
            xiang:"龙泉大道888号",//详细地址
            kai:"2022-11-12 13:00",//检测开始日期
            jie:"2022-13 04:00",//检测结束日期
            bei:"无"//备注
            }]
            
        });
        
        onBeforeMount(()=>{
            //获取核酸数据
            axios({
                method: "get", url:"dailyAddition/selectEditContact", params:{id:jie}
            }).then((res) => {

                let a = res.data.data[0];
                contnei1.contnei = a
                console.log(a);
                

            })
        })
        const xiu=()=>{
            console.log('hh');
            axios({
                method: "get", url:"dailyAddition/selectEditContact", params:{
                    id:jie,
                    name:contnei1.contnei.name,
                    sex:contnei1.contnei.sex,
                    idCard:contnei1.contnei.idCard,phoneNum:contnei1.contnei.phoneNum,nativeAddress:contnei1.contnei.nativeAddress,
                    nowAddress:contnei1.contnei.nowAddress,residenceAddress:contnei1.contnei.residenceAddress,
                    address:contnei1.contnei.address,
                    startDate:contnei1.contnei.startDate,
                    removeDate:contnei1.contnei.removeDate,
                    notes:"无",
                }
            }).then((res) => {

                console.log('成功了');
                

            })
            
        }
        
        return{...toRefs(contnei1),xiu}
    }
})


</script>

<style scoped lang="less">
.hh{
    width: 1136px;
    height: 800px;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
}
.quan{
    width: 100%;
    height: 700px;
}
// 设置表头样式
/deep/ .el-table th{
    background-color: #f9f9f9 !important; 
    color: black;
    Font-weight:400;// 字体粗细
    
}
.ju{
    padding: 20px 0px 20px 0px;
}
.head{
    background-color: #ffffff;
    width: 1136px;
    height: 172px !important;
}
.zhong{
    position: relative;;
    width: 100%;
    height: 100%;
    padding:30px 0px 50px 20px;
    background-color: #ffffff;
}
.content{
    width: 100%;
   

}
.nei{
    display:inline-block ;
    width: 122px;
    margin: 0px 20px 20px 20px;
    text-align: right;
}
.hei{
    display:inline-block ;
    width: 122px;
    margin: 0px 20px 180px 20px;
    text-align: right;
}
.zhong span{
    font-size:14px
}
.img{
    position: absolute;
    top: 0px;
    right: 0px;
}
.jian{
    transform:rotate(39deg);
    position: absolute;
    top:32px;
    right:25px;
    color: #f9f9f9;
}
.wei{
    width: 100%;
    text-align:center;
    padding-top:20px
}
.wei a{
    margin-left:20px
}
.hong{
    color: rgb(255, 0, 0);
}
textarea{
    resize: none;
    width: 400px ;
    height: 150px ;
    border-radius: 10px ;
    padding-left:10px ;
    position: absolute;
    top:535px
}
input{
    width: 400px;
    height: 40px;
    border-radius: 10px;
    padding-left:10px
}
.mb-2{
    display: inline;
}
</style>